<template>
  <view class="register-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 主要内容 -->
    <view class="main-content">
      <!-- Logo区域 -->
      <view class="logo-section">
        <view class="logo-wrapper">
          <image class="logo-image" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
        </view>
        <text class="app-title">{{ globalConfig.appInfo.name }}</text>
        <text class="app-subtitle">创建您的账户，开始使用</text>
      </view>

      <!-- 注册表单 -->
      <view class="form-card">
        <view class="form-header">
          <text class="form-title">账户注册</text>
          <text class="form-subtitle">请填写您的注册信息</text>
        </view>

        <view class="form-content">
          <!-- 用户名输入 -->
          <view class="input-group">
            <view class="input-wrapper">
              <view class="input-icon">
                <uni-icons type="person" size="20" color="#007aff"></uni-icons>
              </view>
              <input 
                v-model="registerForm.username" 
                class="form-input" 
                type="text" 
                placeholder="请输入用户名" 
                maxlength="30"
                :focus="false"
              />
            </view>
          </view>

          <!-- 密码输入 -->
          <view class="input-group">
            <view class="input-wrapper">
              <view class="input-icon">
                <uni-icons type="locked" size="20" color="#007aff"></uni-icons>
              </view>
              <input 
                v-model="registerForm.password" 
                type="password" 
                class="form-input" 
                placeholder="请输入密码" 
                maxlength="20"
                :focus="false"
              />
            </view>
          </view>

          <!-- 确认密码输入 -->
          <view class="input-group">
            <view class="input-wrapper">
              <view class="input-icon">
                <uni-icons type="locked" size="20" color="#007aff"></uni-icons>
              </view>
              <input 
                v-model="registerForm.confirmPassword" 
                type="password" 
                class="form-input" 
                placeholder="请再次输入密码" 
                maxlength="20"
                :focus="false"
              />
            </view>
          </view>

          <!-- 验证码输入 -->
          <view class="input-group" v-if="captchaEnabled">
            <view class="input-wrapper captcha-wrapper">
              <view class="input-icon">
                <uni-icons type="chatboxes" size="20" color="#007aff"></uni-icons>
              </view>
              <input 
                v-model="registerForm.code" 
                type="number" 
                class="form-input captcha-input" 
                placeholder="请输入验证码" 
                maxlength="4"
                :focus="false"
              />
              <view class="captcha-image-wrapper" @click="getCode">
                <image :src="codeUrl" class="captcha-image" mode="aspectFit"></image>
                <view class="captcha-refresh">
                  <uni-icons type="refresh" size="16" color="#007aff"></uni-icons>
                </view>
              </view>
            </view>
          </view>

          <!-- 注册按钮 -->
          <view class="button-group">
            <button 
              @click="handleRegister" 
              class="register-button" 
              :disabled="isRegistering"
              :loading="isRegistering"
            >
              <text v-if="!isRegistering">立即注册</text>
              <text v-else>注册中...</text>
            </button>
          </view>

          <!-- 其他选项 -->
          <view class="options-section">
            <view class="login-link">
              <text class="link-text">已有账户？</text>
              <text @click="handleUserLogin" class="link-button">立即登录</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 协议区域 -->
      <view class="agreement-section">
        <text class="agreement-text">注册即代表同意</text>
        <text @click="handleUserAgrement" class="agreement-link">《用户协议》</text>
        <text class="agreement-text">和</text>
        <text @click="handlePrivacy" class="agreement-link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue"
import { getCodeImg, register } from '@/api/login'
import { useConfigStore } from '@/store'

const { proxy } = getCurrentInstance()
const globalConfig = useConfigStore().config
const codeUrl = ref("")
const isRegistering = ref(false)

// 验证码开关
const captchaEnabled = ref(true)
const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
  code: "",
  uuid: ""
})

// 用户登录
function handleUserLogin() {
  proxy.$tab.redirectTo(`/pages/login`)
}

// 隐私协议
function handlePrivacy() {
  let site = globalConfig.appInfo.agreements[0]
  proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
}

// 用户协议
function handleUserAgrement() {
  let site = globalConfig.appInfo.agreements[1]
  proxy.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
}

// 获取图形验证码
function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
    if (captchaEnabled.value) {
      codeUrl.value = 'data:image/gif;base64,' + res.img
      registerForm.value.uuid = res.uuid
    }
  })
}

// 注册方法
async function handleRegister() {
  if (registerForm.value.username === "") {
    proxy.$modal.msgError("请输入用户名")
    return
  }
  if (registerForm.value.password === "") {
    proxy.$modal.msgError("请输入密码")
    return
  }
  if (registerForm.value.confirmPassword === "") {
    proxy.$modal.msgError("请再次输入密码")
    return
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    proxy.$modal.msgError("两次输入的密码不一致")
    return
  }
  if (registerForm.value.code === "" && captchaEnabled.value) {
    proxy.$modal.msgError("请输入验证码")
    return
  }

  isRegistering.value = true
  proxy.$modal.loading("注册中，请稍候...")
  
  try {
    await userRegister()
  } catch (error) {
    isRegistering.value = false
    if (captchaEnabled.value) {
      getCode()
    }
  }
}

// 用户注册
async function userRegister() {
  try {
    await register(registerForm.value)
    proxy.$modal.closeLoading()
    
    uni.showModal({
      title: "注册成功",
      content: `恭喜您，账户 ${registerForm.value.username} 注册成功！`,
      showCancel: false,
      confirmText: "立即登录",
      success: function (res) {
        if (res.confirm) {
          proxy.$tab.redirectTo(`/pages/login`)
        }
      }
    })
  } catch (error) {
    proxy.$modal.closeLoading()
    throw error
  }
}

getCode()
</script>

<style lang="scss" scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    
    &.circle-1 {
      width: 200rpx;
      height: 200rpx;
      top: -100rpx;
      right: -100rpx;
    }
    
    &.circle-2 {
      width: 300rpx;
      height: 300rpx;
      bottom: -150rpx;
      left: -150rpx;
    }
    
    &.circle-3 {
      width: 150rpx;
      height: 150rpx;
      top: 50%;
      right: 10%;
    }
  }
}

.main-content {
  position: relative;
  z-index: 1;
  padding: 40rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-section {
  text-align: center;
  margin-bottom: 60rpx;
  
  .logo-wrapper {
    margin-bottom: 30rpx;
    
    .logo-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 24rpx;
      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    }
  }
  
  .app-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  .app-subtitle {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
  }
}

.form-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
  
  .form-header {
    text-align: center;
    margin-bottom: 50rpx;
    
    .form-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 12rpx;
    }
    
    .form-subtitle {
      display: block;
      font-size: 26rpx;
      color: #666666;
    }
  }
  
  .form-content {
    .input-group {
      margin-bottom: 32rpx;
      
      .input-wrapper {
        position: relative;
        background: #f8f9fa;
        border-radius: 20rpx;
        border: 2rpx solid transparent;
        transition: all 0.3s ease;
        
        &:focus-within {
          background: #ffffff;
          border-color: #007aff;
          box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
        }
        
        .input-icon {
          position: absolute;
          left: 24rpx;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }
        
        .form-input {
          width: 100%;
          height: 88rpx;
          padding: 0 24rpx 0 72rpx;
          font-size: 28rpx;
          color: #333333;
          background: transparent;
          border: none;
          outline: none;
          
          &::placeholder {
            color: #999999;
          }
        }
        
        &.captcha-wrapper {
          display: flex;
          align-items: center;
          
          .captcha-input {
            flex: 1;
            padding-right: 24rpx;
          }
          
          .captcha-image-wrapper {
            position: relative;
            width: 180rpx;
            height: 60rpx;
            margin-left: 20rpx;
            border-radius: 12rpx;
            overflow: hidden;
            cursor: pointer;
            
            .captcha-image {
              width: 100%;
              height: 100%;
            }
            
            .captcha-refresh {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background: rgba(255, 255, 255, 0.9);
              border-radius: 50%;
              width: 32rpx;
              height: 32rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.3s ease;
            }
            
            &:hover .captcha-refresh {
              opacity: 1;
            }
          }
        }
      }
    }
    
    .button-group {
      margin-top: 50rpx;
      
      .register-button {
        width: 100%;
        height: 88rpx;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        border: none;
        border-radius: 44rpx;
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8rpx 24rpx rgba(40, 167, 69, 0.3);
        transition: all 0.3s ease;
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 4rpx 12rpx rgba(40, 167, 69, 0.3);
        }
        
        &:disabled {
          background: #cccccc;
          box-shadow: none;
        }
      }
    }
    
    .options-section {
      margin-top: 40rpx;
      text-align: center;
      
      .login-link {
        .link-text {
          font-size: 26rpx;
          color: #666666;
        }
        
        .link-button {
          font-size: 26rpx;
          color: #007aff;
          font-weight: 600;
          margin-left: 8rpx;
          cursor: pointer;
          
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

.agreement-section {
  text-align: center;
  
  .agreement-text {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .agreement-link {
    font-size: 24rpx;
    color: #ffffff;
    text-decoration: underline;
    margin: 0 4rpx;
    cursor: pointer;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>
